import React from 'react';
import { useTemplateContext } from '@/contexts/TemplateContext';

const DocumentPreview: React.FC = () => {
  const { selectedTemplate, documentContent } = useTemplateContext();
  
  if (!selectedTemplate) {
    return (
      <div className="bg-white rounded-lg shadow-md p-6 h-full flex flex-col">
        <h3 className="text-lg font-semibold mb-4 text-gray-800">3. 文书实时预览</h3>
        <div className="flex-1 flex items-center justify-center text-gray-500 border border-dashed border-gray-300 rounded-md">
          请选择模板并填写参数以查看预览
        </div>
      </div>
    );
  }
  
  // 分离标题和正文内容
  const [title, ...contentLines] = documentContent ? documentContent.split('\n') : [];
  const bodyContent = contentLines.join('\n');
  
  return (
    <div className="bg-white rounded-lg shadow-md p-6 h-full flex flex-col">
      <h3 className="text-lg font-semibold mb-4 text-gray-800">3. 文书实时预览</h3>
      <div 
        className="flex-1 overflow-y-auto p-8 bg-gray-50 rounded-md border border-gray-200"
        style={{ 
          fontFamily: '"SimSun", "宋体", serif', 
          lineHeight: '37.33px', // 28磅行距（1磅≈1.333像素）
          fontSize: '16px',
          padding: '40px'
        }}
      >
        {documentContent ? (
          <div className="prose max-w-none">
            {/* 标题样式 - 黑体二号居中 */}
            {title && title.trim() && (
              <h1 style={{
                fontSize: '22pt',
                fontFamily: '"SimHei", "黑体", sans-serif',
                textAlign: 'center',
                marginBottom: '30px',
                fontWeight: 'bold'
              }}>
                {title.trim()}
              </h1>
            )}
            
            {/* 正文样式 - 仿宋三号，首行缩进2字符 */}
            <div style={{
              fontSize: '16pt',
              fontFamily: '"FangSong_GB2312", "仿宋_GB2312", serif',
               lineHeight: '28px', // 28磅行距
               textAlign: 'justify'
            }}>
              {bodyContent.split('\n').map((paragraph, index) => {
                if (!paragraph.trim()) return <br key={index} />;
                
                return (
                  <p 
                    key={index} 
                    style={{ 
          textIndent: '2em',  // 首行缩进2字符
          margin: '0 0 8px 0' // 调整段落间距，确保整体行距符合28磅要求
                    }}
                  >
                    {paragraph}
                  </p>
                );
              })}
            </div>
          </div>
        ) : (
          <p className="text-gray-500 italic">请填写参数以生成文档预览</p>
        )}
      </div>
    </div>
  );
};

export default DocumentPreview;